<script setup>
import { inject, onMounted, provide, ref } from 'vue'
import SuperTable from '@/components/SuperTable/Index.vue'
import SuperTableClass from '@/components/SuperTable/SuperTableClass'

const superTable = new SuperTableClass({
    headerBtn: {
        type: 'headerBtn',
        style: {
            textAlign: 'right'
        }
    },
    columns: [
        { type: 'selection', align: 'center', width: 60, operator: false },
        { type: 'index', label: '序号', width: 100, align: 'center', typeConfig: { type: 3, showType: 'all' } },
        { prop: 'name', label: '姓名', width: 120, type: 'text', align: 'center' },
        {
            prop: 'status',
            label: '状态',
            type: 'select',
            typeConfig: {
                options: [
                    { label: '正常', value: '正常' },
                    { label: '异常', value: '异常' }
                ]
            }
        },
        { prop: 'age', label: '年龄', type: 'input', typeConfig: { disabled: false, rules: 'required' } },
        {
            prop: '',
            label: '考试成绩',
            children: [
                {
                    prop: 'scoreChinese',
                    label: '语文',
                    type: 'scoreChinese',
                    typeConfig: {
                        rules: 'required'
                    }
                },
                {
                    prop: 'scoreMath',
                    label: '数学',
                    type: 'number',
                    typeConfig: {
                        disabled: false,
                        min: 0,
                        max: 100
                    }
                },
                {
                    prop: 'scoreEnglish',
                    label: '英语',
                    type: 'link'
                }
            ]
        },
        { prop: 'operate', label: '操作', type: 'customOperate', align: 'center' }
    ],
    data: [
        { name: '张三', age: 18, status: '正常', scoreChinese: 80, scoreMath: 90, scoreEnglish: 85, _scoreMath_disabled: true },
        { name: '李四', age: 19, status: '异常', scoreChinese: 70, scoreMath: 80, scoreEnglish: 75 },
        { name: '王五', age: 20, status: '正常', scoreChinese: 90, scoreMath: 95, scoreEnglish: 92 },
        { name: '赵六', age: 21, status: '异常', scoreChinese: 85, scoreMath: 88, scoreEnglish: 90 },
        { name: '钱七', age: 22, status: '正常', scoreChinese: 92, scoreMath: 96, scoreEnglish: 94 },
        { name: '孙八', age: 23, status: '异常', scoreChinese: 88, scoreMath: 92, scoreEnglish: 86 },
        { name: '周九', age: 24, status: '正常', scoreChinese: 95, scoreMath: 98, scoreEnglish: 96 }
    ],
    pagination: {
        status: true,
        page: 1,
        pageSize: 5,
        total: 7,
        layout: 'prev, pager, next, total, sizes',
        pageSizes: [5, 10, 20, 50, 100],
        background: true
    }
})

const { table } = superTable

superTable.getListFunc = () => {
    console.log('请求数据2...')
}

superTable.handleRowChange = (type, index, fieldName, row) => {
    console.log(type, index, fieldName, row)
    console.log('are you ok')
}

superTable.saveFunc = async () => {
    console.log('saveFunc')
}

onMounted(() => {
    superTable.getList()
})

provide('superTable', superTable)
</script>
<template>
    <div>
        <!-- <super-table></super-table> -->
        <hr />
        <super-table>
            <template #customOperate="{ scope, col }">
                <el-button type="primary" size="small" @click="superTable.handleRowChange('operateEdit', scope.$index, col.prop, scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="superTable.handleRowChange('operateDelete', scope.$index, col.prop, scope.row)">删除</el-button>
            </template>

            <template #customHeaderBtn>
                <el-button type="" @click="superTable.flushTable">刷新</el-button>
                <el-button type="" @click="superTable.handleColumnSetting">列设置</el-button>
            </template>

            <template #scoreChinese="{ scope, col }">
                <el-input v-model="scope.row[col.prop]" :disabled="false" @change="superTable.handleRowChange('input', scope.$index, col.prop, scope.row)" />
                自定义输入框
            </template>
        </super-table>
    </div>
</template>
